<template>
	<div class="container">
		<div class="msg-item" @click="goMsgDetail">
			<p class="time">刚刚</p>
			<div class="msg-main">
				<div class="msg-content">
					<img src="http://img2.imgtn.bdimg.com/it/u=1613405818,622297924&fm=26&gp=0.jpg" />
					<span class="title">消息标题消息标题</span>
					<div class="content many-overflow-hide">消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容…</div>
					<hr />
					<p>立即查看</p>
				</div>
			</div>
		</div>
		
		<div class="msg-item" @click="goMsgDetail">
			<p class="time">刚刚</p>
			<div class="msg-main">
				<div class="msg-content">
					<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3804397693,1388718398&fm=26&gp=0.jpg" />
					<span class="title">消息标题消息标题</span>
					<div class="content many-overflow-hide">消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容…</div>
					<hr />
					<p>立即查看</p>
				</div>
			</div>
		</div>
		
		<div class="msg-item" @click="goMsgDetail">
			<p class="time">刚刚</p>
			<div class="msg-main">
				<div class="msg-content">
					<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1047045086,3105509522&fm=26&gp=0.jpg" />
					<span class="title">消息标题消息标题</span>
					<div class="content many-overflow-hide">消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容…</div>
					<hr />
					<p>立即查看</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				
			}
		},
		methods: {
			goMsgDetail() {
				this.$router.push({
					name: 'msg-detail-index'
				})
			}
		},
	}
</script>

<style scoped="scoped" lang="less">
	.container {

		.msg-item {

			.time {
				font-size: 12px;
				color: #9B9B9B;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: .3rem 0;
			}

			.msg-main {
				display: flex;
				margin: 0 30px;

				.msg-content {
					flex: 1;
					background: #FFFFFF;
					border-radius: .2rem;
					padding: .3rem;
					display: flex;
					flex-direction: column;

					img {
						width: 100%;
						margin-bottom: .3rem;
					}

					.title {
						font-size: 14px;
						color: #4A4A4A;
						letter-spacing: 0.17px;
					}

					.content {
						margin: .2rem 0 .3rem 0;
						color: #9B9B9B;
					}
					
					p {
						text-align: center;
						margin-top: .2rem;
						color: #4A90E2;
						font-size: .24rem;
					}
				}
			}
		}
		
		.msg-item:last-child {
			margin-bottom: .3rem;
		}
	}
</style>
